<script lang="ts" setup>
import { ref, computed } from 'vue'
import PermissionService from '@/api/permission'
import { ListToTree } from '@/utils/listToTree'

const permissionList = ref()
const getPermissionList = async () => {
  var res: any = await PermissionService.getPermissionListService()
  permissionList.value = ListToTree(res, 0)
  // console.log(res)
  // console.log(permissionList.value)
}
getPermissionList()

// 对话框
const showDialog = ref(false)
const perForm = ref()
const formData = ref({
  name: '', // 名称
  code: '', // 标识
  description: '', // 描述
  type: '', // 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了
  pid: '', // 因为做的是树 需要知道添加到哪个节点下了
  enVisible: '0' // 默认关闭
} as any)
const showText = computed(() => (formData.value.id ? '编辑' : '新增'))
const rules = {
  name: [{ required: true, message: '权限名称不能为空', trigger: 'blur' }],
  code: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }]
}

// 添加一级权限
const addPermission = (pid: any, type: any) => {
  formData.value.pid = pid
  formData.value.type = type
  showDialog.value = true
}

const btnOK = async () => {
  await perForm.value.validate()
  if (formData.id) {
    // 编辑
    await PermissionService.updatePermissionService(formData.value)
    ElMessage.success('编辑成功')
  } else {
    // 新增
    await PermissionService.addPermissionService(formData.value)
    ElMessage.success('新增成功')
  }
  await getPermissionList()
  showDialog.value = false
}
const btnCancel = () => {
  formData.value = {
    name: '', // 名称
    code: '', // 标识
    description: '', // 描述
    type: '', // 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了
    pid: '', // 因为做的是树 需要知道添加到哪个节点下了
    enVisible: '0' // 默认关闭
  }
  perForm.value.resetFields()
  showDialog.value = false
}

// 编辑权限
const editPermission = async (id: any) => {
  formData.value = await PermissionService.getPermissionService(id)
  showDialog.value = true
}
// 删除权限
const delPermission = async (id: any) => {
  ElMessageBox.confirm('确认要删除该权限?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await PermissionService.delPermissionService(id)
      await getPermissionList()
      ElMessage.success('删除成功')
    })
    .catch(() => {
      ElMessage.info('删除取消')
    })
}
</script>

<template>
  <div class="container">
    <div class="app-container">
      <el-button
        class="btn-add"
        size="small"
        type="primary"
        @click="addPermission(0, 1)"
        >添加权限</el-button
      >
      <el-table :data="permissionList" row-key="id" default-expand-all>
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="标识" prop="code"></el-table-column>
        <el-table-column label="描述" prop="description"></el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button
              v-if="row.type == 1"
              text
              size="small"
              @click="addPermission(row.id, 2)"
              >添加</el-button
            >
            <el-button text size="small" @click="editPermission(row.id)"
              >编辑</el-button
            >
            <el-button text size="small" @click="delPermission(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <!-- 放置一个弹层 用来编辑新增节点 -->
  <el-dialog
    :title="`${showText}权限点`"
    v-model="showDialog"
    @close="btnCancel"
  >
    <!-- 表单 -->
    <el-form ref="perForm" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="权限名称" prop="name">
        <el-input v-model="formData.name" style="width: 90%" />
      </el-form-item>
      <el-form-item label="权限标识" prop="code">
        <el-input v-model="formData.code" style="width: 90%" />
      </el-form-item>
      <el-form-item label="权限描述">
        <el-input v-model="formData.description" style="width: 90%" />
      </el-form-item>
      <el-form-item label="开启">
        <el-switch
          v-model="formData.enVisible"
          active-value="1"
          inactive-value="0"
        />
      </el-form-item>
    </el-form>
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button size="small" type="primary" @click="btnOK">确定</el-button>
        <el-button size="small" @click="btnCancel">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<style>
.btn-add {
  margin: 10px;
}
</style>
